<template>
  <transition name="search">
    <div v-show="show" class="search">
      <van-search v-model="searchName" :placeholder="placeholder" show-action @cancel="cancel" />
      <van-list v-model:loading="listLoading" class="list-content" @scroll="listScroll">
        <van-cell class="content-child" @click="change(searchName)" :title="searchName"> </van-cell>
        <van-cell
          v-for="(item, index) in list"
          :key="index"
          class="content-child"
          @click="change(item)"
          :title="item.showName"
        >
        </van-cell>
      </van-list>
    </div>
  </transition>
</template>

<script setup>
import api from '@/api'
import { ref, toRefs, watch } from 'vue'
import { debounce } from '@/libs/utils'
const props = defineProps({
  show: {
    required: true, // 是否必传
    type: Boolean // 类型
  },
  type: {
    required: true, // 是否必传
    type: String // 类型
  },
  searchLimit: {
    required: false, // 是否必传
    type: Object,
    default: () => ({})
  },
  addable: {
    required: false, // 是否必传
    type: Boolean,
    default: false
  }
})
const { show, type, searchLimit, addable } = toRefs(props)
const emit = defineEmits(['update:id', 'update:name', 'change', 'update:show'])

const searchName = ref('')
const placeholder = ref('')
const listLoading = ref(false)
const scrollTop = ref(0)
const list = ref([])
function cancel() {
  emit('update:show', false)
}

async function getList() {
  switch (type.value) {
    case 'material': {
      const res = await api.baseMaterialList(
        Object.assign({ materialName: searchName.value }, searchLimit.value, {
          pageInfo: {
            pageNum: 1,
            pageSize: 999
          }
        })
      )
      list.value = res.data.map((item) => {
        item.showName = item.materialName
        item.name = item.materialName
        return item
      })
      break
    }
    case 'warehouse': {
      const res = await api.warehouseList(
        Object.assign({ warehouseName: searchName.value }, searchLimit.value, {
          pageInfo: {
            pageNum: 1,
            pageSize: 999
          }
        })
      )
      list.value = res.data.map((item) => {
        item.showName = item.warehouseName
        item.name = item.warehouseName
        return item
      })
      break
    }
    case 'supplier': {
      const res = await api.cusSearch(
        Object.assign({ cusName: searchName.value }, searchLimit.value, {
          cusType: '2',
          status: '3',
          pageInfo: {
            pageNum: 1,
            pageSize: 999
          }
        })
      )
      list.value = res.data.map((item) => {
        item.showName = item.cusName
        item.name = item.cusName
        return item
      })
      break
    }
  }
  if (list.value.length === 1) {
    if (!addable.value) {
      change(list.value[0])
    }
  }
}

watch(searchName, debounce.call(null, getList, 500))

watch(show, (val) => {
  if (val) {
    searchName.value = ''
    getList()
  }
})
function listScroll(e) {
  scrollTop.value = e.target.scrollTop
}

function change(item) {
  if (typeof item === 'string') {
    emit('update:name', item)
    emit('change', item)
  } else {
    emit('update:id', item.id)
    emit('update:name', item.name)
    emit('change', item)
  }
  cancel()
}
</script>

<style lang="scss" scope>
.search-enter-from,
.search-leave-to {
  transform: translate3d(100%, 0, 0);
}
.search-enter-to,
.search-leave-from {
  transform: translate3d(0, 0, 0);
}
.search-enter-active,
.search-leave-active {
  transition: transform 0.4s ease;
  z-index: 1002;
}

.search {
  width: 100%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3001;
  .refresh-content {
    width: 100%;
    flex: 1;
    .list-content {
      width: 100%;
      height: 100%;
      overflow: auto;
      .content-child {
        border-bottom: 0.05rem solid #eeeeee;
        color: #333333;
        font-size: 0.75rem;
      }
    }
  }
}
</style>
